<template>
	
	<div>
		<el-dialog
		  title="导出客户"
		  :visible.sync="dialogVisible"
		  :width="'400px'"
			top="8vh"
		  :before-close="handleClose">
		  <div class="button-vertical-array">
				<el-button type="primary" @click="handleDownload">下载导入模板</el-button>
			</div>
			<div class="button-vertical-array">
				<el-button type="primary" @click="exportData">导出当前数据</el-button>
			</div>
			<div class="button-vertical-array">
				<el-button type="primary" @click="exportAllData">导出全部数据</el-button>
			</div>
		</el-dialog>
	</div>
	
</template>

<script>
	import { exportCustomer } from '@/api/customer'
	
	export default {
		data () {
			return {
				dialogVisible: false,
				tableData: [],
			}
		},
		methods: {
			handleClose () {
				this.dialogVisible = false
			},
			// 导出全部数据
			exportAllData () {
				let data = {}
				data["mode"] = 'all'
				let routeUrl = this.$router.resolve({
					 path: "/base/api/v1/customer/manage/import/",
					 query: data
				 });
				 window.open(routeUrl.href, '_blank');
				 // this.dialogVisible = false
			},
			// 导出当前数据
			exportData() {
				if (this.tableData.length > 0) {
						import('@/vendor/Export2Excel').then(excel => {
							const tHeader = ['客户名', '昵称', '手机号', '客户平台', 'QQ号', '微信', '创建时间'] // 表头
							const filterVal = ['name', 'nickname', 'telephone', 'platform_label', 'qq', 'wechat', 'joined_time'] // 需要导出的项目
							const list = this.tableData // 所有列表数据
							const data = this.formatJson(filterVal, list)
							excel.export_json_to_excel({
								header: tHeader,
								data,
								filename: 'customer' // 文件名称
							})
							// this.dialogVisible = false
						})
				} else {
					this.$errorMsg('暂无数据可导出')
				}
			},
			// 过滤需要的数据
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => {
						return v[j]
				}))
			},
			// 下载模板
			handleDownload () {
				let routeUrl = this.$router.resolve({
					 path: "/static/customer.xlsx",
				 });
				 window.open(routeUrl.href, '_blank');
				 // this.dialogVisible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.button-vertical-array {
		text-align: center;
		margin-bottom: 20px;
	}
	
</style>
